<template>
  <div class="wrapper">
    <div class="container d-flex justify-content-center">
      <div class="title">
        Welcome, Junier!
        <div class = "title-info">
          A Modern Blog With Markdown,
          developed by XXX
          <div class=" d-flex justify-content-center">
            <router-link :to="{name: 'user_login'}">
              <button type="button" class="btn btn-lg btn-outline-primary mt-5 me-5 custom-margin">登录</button>
            </router-link>
            <router-link :to="{name: 'user_register'}">
              <button type="button" class="btn btn-lg btn-outline-primary mt-5 me-5 custom-margin">注册</button>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">

</script>

<style scoped>
.wrapper {
  background-image: linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%);
}

.title {
  margin-top: 5vh;
  text-align: center;
  font-size: 5vh;
  color: white;
}

.title-info {
  padding-top: 3vh;
  text-align: center;
  font-size: 3vh;
}

.btn-outline-primary {
  background-color: transparent;
  border-color: #ccc;
  color: white;
}

.btn-outline-primary:hover {
  border-color: whitesmoke;
  transition-duration: 200ms;
  background-color: rgba(245, 245, 245, 0.1); /* 轻微的背景颜色变化 */
}

.custom-margin {
  margin-bottom: 3vh;
}
</style>